<template>
    <div class="Box flex">
        <div class="sonBox">
            <!-- 头部横幅 -->
            <div class="Nav">
                <h1>个人信息</h1>
            </div>


            <!-- 主体内容 -->
            <el-row :gutter="20">
                <!-- 左侧信息栏 -->
                <el-col :md="6" :sm="24">
                    <el-card class="info-card" style="height: 98.5%;" v-if="Info">
                        <!-- 头像 -->
                        <div class="avatar-wrapper">
                            <el-avatar :size="120" :src="getAvatarImgUrl(Info.avatarimg)" />
                            <h2>{{ Info.Name }}</h2>
                            <p class="subtitle">{{ Info.role_name }}</p>
                        </div>
                        <el-icon :size="25" style="position: absolute;right: 10px;top: 10px;" class="EditIcon"
                            @click="ImgVisible = true">
                            <Edit />
                        </el-icon>
                        <!-- 基础信息 -->
                        <el-divider />
                        <div class="info-item">
                            <el-icon>
                                <User />
                            </el-icon>
                            <span>账号：{{ Info.username }}</span>
                        </div>
                        <div class="info-item">
                            <el-icon>
                                <Male />
                            </el-icon>
                            <span>性别：{{ Info.gender }}</span>
                        </div>
                        <div class="info-item">
                            <el-icon>
                                <Location />
                            </el-icon>
                            <span>地区：{{ Info.address }}</span>
                        </div>
                        <div class="info-item">
                            <el-icon>
                                <Phone />
                            </el-icon>
                            <span>电话：{{ Info.phoneA }}</span>
                        </div>
                        <div class="info-item">
                            <el-icon>
                                <Message />
                            </el-icon>
                            <span>邮箱：{{ Info.email }}</span>
                        </div>


                        <div style="border:1px solid #EEE;height: auto;">
                            <el-input :rows="8" type="textarea" v-model="Info.introduce" readonly />
                        </div>

                    </el-card>
                </el-col>

                <!-- 右侧内容区 -->
                <el-col :md="18" :sm="24" v-if="Info">
                    <!-- 关于我 -->
                    <el-card class="section-card">
                        <template #header>
                            <div class="flex-LR">
                                <div></div>
                                <h3>基本信息</h3>
                                <el-icon :size="25" class="EditIcon" @click="BaseEdit">
                                    <Edit />
                                </el-icon>
                            </div>
                        </template>
                        <el-descriptions :column="2" :border="true">
                            <el-descriptions-item v-for="(item, index) in InfoColumns" :key="index"
                                :label="item.label">{{
                                    Info[item.prop]
                                }}</el-descriptions-item>
                        </el-descriptions>
                    </el-card>

                    <!-- 工作经历 -->
                    <el-card class="section-card">
                        <template #header>
                            <div class="flex-LR">
                                <div></div>
                                <h3>工作经历</h3>
                                <el-icon :size="25" class="EditIcon" @click="Rundrawer = true">
                                    <Edit />
                                </el-icon>
                            </div>
                        </template>
                        <el-timeline>
                            <el-timeline-item v-for="(item, index) in Info.experience" :key="item.index"
                                :timestamp="item.period" placement="top">
                                <el-card shadow="hover">
                                    <h4>{{ item.name }}</h4>
                                    <p>{{ item.description }}</p>
                                    <el-tag v-for="tag in item.tags" :key="tag" type="info" size="small">
                                        {{ tag }}
                                    </el-tag>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </el-card>

                </el-col>
            </el-row>
        </div>
        <!-- 抽屉组 -->
        <el-dialog v-model="ImgVisible" :modal="true" title="用户头像变更">
            <div>
                <!-- 预览 -->
                <div class="text-center">
                    <h3>预览:</h3>
                    <el-avatar :size="120" :src="imageUrl?imageUrl:getAvatarImgUrl(Info.avatarimg)" />
                </div>
                <!-- 上传 -->
                <el-upload :auto-upload="false" :on-change="handleFileChange" :show-file-list="false" accept="image/*" class="flex-center">
                    <template #trigger><el-button type="primary">选择文件</el-button></template>
                    <el-button type="success" @click="uploadImage" :disabled="!selectedFile">
                        上传
                    </el-button>
                </el-upload>
            </div>
        </el-dialog>
        <!-- 修改抽屉 -->
        <el-drawer v-model="editdrawer" title="edit" :with-header="false">
            <cy-form class="EditForm" label-width="auto" style="max-width: 31.25rem">
                <cy-form-item v-for="(item, index) in editFormColumns" :key="index" :label="item.label">
                    <!-- 文本域 -->
                    <template v-if="['notes', 'introduce'].includes(item.prop)">
                        <el-input v-model="editform[item.prop]" :rows="8" type="textarea" />
                    </template>
                    <!-- 性别选择 -->
                    <template v-else-if="['gender'].includes(item.prop)">
                        <el-select v-model="editform[item.prop]">
                            <el-option label="男" value="男" />
                            <el-option label="女" value="女" />
                        </el-select>
                    </template>
                    <!-- 输入框 -->
                    <template v-else>
                        <el-input v-model="editform[item.prop]" :readonly="item.isReadonly ? item.isReadonly : false" />
                    </template>

                </cy-form-item>
                <cy-form-item>
                    <!-- 操作按钮 -->
                    <el-button type="primary" @click="EditSubmit">确认</el-button>
                    <el-button @click="editdrawer = false">取消</el-button>
                </cy-form-item>
            </cy-form>
        </el-drawer>
        <!-- 工作经历修改抽屉 -->
        <el-drawer v-model="Rundrawer" title="edit" :with-header="false">
            <cy-form class="EditForm" label-width="auto" style="max-width: 31.25rem">
                <div v-for="(item, index) in Info.experience" :key="index">
                    <!-- 工作经历名称 -->
                    <cy-form-item label="工作">
                        <el-input v-model="item.name" />
                    </cy-form-item>
                    <!-- 工作经历时间范围 -->
                    <cy-form-item label="时间范围">
                        <el-input v-model="item.period" />
                    </cy-form-item>
                    <!-- 工作经历描述 -->
                    <cy-form-item label="描述">
                        <el-input v-model="item.description" type="textarea" :rows="4" />
                    </cy-form-item>
                </div>
                <cy-form-item>
                    <!-- 操作按钮 -->
                    <el-button type="primary" @click="RunSubmit">确认</el-button>
                    <el-button @click="Rundrawer = false">取消</el-button>
                </cy-form-item>
            </cy-form>
        </el-drawer>
    </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted, watch } from 'vue'
import { User, Location, Phone, Message, Male, Female, Edit } from '@element-plus/icons-vue'
import CyForm from "@/components/form";
import CyFormItem from "@/components/form-item";
import { assignObject } from "@/utils/object";
import { ElMessage } from "element-plus";
import Icon from '@/assets/img/01.jpg'
import {
    SearcMyByIdAPI,
    upAvatarImg,
    UpdateUserBaseByIdAPI,
    UpdateUserEcxByIdAPI,
} from "@/api/user";
import useUserStore from "@/store/modules/user";
const useStore = useUserStore();
const getAvatarImgUrl=(imgurl:string)=>{
    if(!imgurl){return Icon}
    return `${import.meta.env.VITE_APP_SERVICE_URL}/${imgurl}`
}
const Info = ref()
// 基本信息
const InfoColumns = [
    // { prop: "id", label: "用户ID" },
    { prop: "Name", label: "姓名" },
    { prop: "username", label: "账号" },
    { prop: "password", label: "密码" },
    { prop: "age", label: "年龄" },
    { prop: "gender", label: "性别" },
    { prop: "IDcard", label: "身份证" },
    { prop: "phoneA", label: "电话" },
    { prop: "email", label: "邮箱" },
    { prop: "status", label: "激活状态" },
    // { prop: "avatarimg", label: "用户头像" },
    { prop: "sign_date", label: "注册时间" },
    { prop: "address", label: "地址" },
    { prop: "notes", label: "备注" },
    { prop: "phoneB", label: "紧急电话" },
    // { prop: "role_id", label: "角色id" },
    { prop: "role_name", label: "角色名" },
    { prop: "role_descripition", label: "角色描述" },
    // { prop: "introduce", label: "个人介绍" },
    // { prop: "experience", label: "职业经历" },
];
// 图形变更抽屉
const ImgVisible = ref(false)
const selectedFile = ref<File | null>(null);
const imageUrl = ref();
// 图片上传点击
const handleFileChange = (file: any) => {
    selectedFile.value = file?.raw;
    imageUrl.value = URL.createObjectURL(file?.raw);
};
// 图片上传
const uploadImage = async () => {
    if (!selectedFile.value) return;
    upAvatarImg(selectedFile.value,Info.value.id).then(res=>{
        const { code, message } = res.data;
        ElMessage.success(message);
        getInfo()
        ImgVisible.value=false
    });
   
};


const editdrawer = ref(false)
/* 基本信息修改 */
const editform = reactive({
    id:'',
    Name: "",
    username: "",
    password: "",
    age: "",
    gender: "",
    IDcard: "",
    phoneA: "",
    email: "",
    status: "",
    // sign_date: "",
    address: "",
    notes: "",
    phoneB: "",
    introduce: "",
});
const editFormColumns = [
    // { prop: "id", label: "用户ID" },
    { prop: "Name", label: "姓名", isReadonly: true },
    { prop: "username", label: "账号", isReadonly: true },
    { prop: "password", label: "密码" },
    { prop: "age", label: "年龄" },
    { prop: "gender", label: "性别" },
    { prop: "IDcard", label: "身份证" },
    { prop: "phoneA", label: "电话" },
    { prop: "email", label: "邮箱" },
    { prop: "status", label: "激活状态", isReadonly: true },
    // { prop: "avatarimg", label: "用户头像" },
    // { prop: "sign_date", label: "注册时间" },
    { prop: "address", label: "地址" },
    { prop: "phoneB", label: "紧急电话" },
    { prop: "notes", label: "备注" },
    { prop: "introduce", label: "个人介绍" },
];
const BaseEdit = () => {
    assignObject(editform, Info.value)
    editdrawer.value = true
}
const EditSubmit=()=>{
    UpdateUserBaseByIdAPI(editform).then(res=>{
        const { code, message } = res.data;
        ElMessage.success(message);
        getInfo()
        editdrawer.value=false
    })
}
const Rundrawer = ref(false)
/* 工作经历修改 */
const RunSubmit=()=>{
    UpdateUserEcxByIdAPI({id:Info.value.id,experience:JSON.stringify(Info.value.experience)}).then(res=>{
        const { code, message } = res.data;
        ElMessage.success(message);
        getInfo()
        Rundrawer.value=false
    })
}

// 基础信息获取
const getInfo = () => {
    SearcMyByIdAPI(useStore.id).then(res => {
        Info.value = res.data.data[0]
    })
}
// 窗口关闭
watch(() => ImgVisible.value, () => {
    if (!ImgVisible.value) {
        imageUrl.value = ''
        selectedFile.value = null
    }
})
onMounted(() => {
    getInfo()
})
</script>

<style scoped lang="scss" d>
.Box {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    background-color: #fff;

    .sonBox {
        flex: 1;
        height: 100%;
    }

    .Nav {
        background: linear-gradient(100deg, #409EFF 0%, #337ecc 100%);
        color: white;
        padding: 10px;
        border-radius: 4px;
        margin: 10px 0;
    }
}

:deep(.el-form-item__content) {
    justify-content: center;
}

.EditIcon :hover {
    color: #409EFF;
    cursor: pointer;
}

.info-card {
    text-align: center;
    position: relative;
}

.avatar-wrapper {
    margin-bottom: 15px;
}

.avatar-wrapper h2 {
    margin: 10px 0 5px;
}

.subtitle {
    color: #909399;
    margin: 0;
}

.info-item {
    margin: 12px 0;
    display: flex;
    align-items: center;
}

.info-item i {
    margin-right: 8px;
    color: #409EFF;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.section-card {
    position: relative;
    margin-bottom: 20px;
}

.section-card h3 {
    margin: 0;
}
</style>